<!-- 面包屑组件 -->
<script>
import { ArrowRight } from '@element-plus/icons-vue'

import { routes } from '@/router/index'

import { mapMutations } from 'vuex'

export default {
  data () {
    // 用来记录所有路由 name 对应的 label
    // Map 是一个类似数组但是，是键值对的方式展示，其不能出现重复的东西
    this.routesMap = new Map()
    // 用来处理将路由规则 转换成 map 对象
    this.initRoutesMap(routes)

    return {
      list: []
    }
  },
  methods: {
    ...mapMutations(['updateCurrentPath']),
    initRoutesMap (routes) {
      routes.forEach(route => {
        // 在 map 中添加对象
        this.routesMap.set(route.name, route.label)
        // 如果有子路由
        if (route.children) {
          this.initRoutesMap(route.children)
        }
      })
    }
  },
  mounted () {
    // $route 是路由配置对象,不带 r 的是用来查询路由信息用的
    // $router.push() 带 r 的是用来跳转路由页面用的
    // console.log(this.$route);
  },
  components: {
    ArrowRight
  },
  watch: {
    $route: {
      immediate: true,
      handler (route) {
        // 处理路由路径
        // console.log(route);

        // 记录当前页面的路由路径
        this.updateCurrentPath(route.path)

        this.list = route.matched.map(item => {
          /*
            [
              {
                name: 'home',
                label: '首页'
              }, {
                name: 'banner',
                label: '轮播图管理'
              }, {
                name: 'bannerlist',
                labrl: '轮播图列表'
              }
            ]
          */
          return {
            name: item.name,
            label: this.routesMap.get(item.name)
          }
        })

        // console.log(arr);

      }
    }
  }
}
</script>

<template>
  <el-breadcrumb separator=">">
    <!-- 根据当前页面的路由路径，来决定面包屑显示什么内容 -->
    <el-breadcrumb-item v-for="item in list" :key="item.name" :to="{ name: item.name }">{{ item.label
    }}</el-breadcrumb-item>

    <!-- <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
    <el-breadcrumb-item>promotion management</el-breadcrumb-item>
    <el-breadcrumb-item>promotion list</el-breadcrumb-item>
    <el-breadcrumb-item>promotion detail</el-breadcrumb-item> -->
  </el-breadcrumb>
</template>

<style lang="scss" scoped>
.el-breadcrumb {
  padding-top: 20px;
  background-color: #80d8ff;
  padding-left: 20px;
}
</style>
